<template>
    <div class="app-container" ref="appContainer">
      <div class="header">
        <el-form :inline="true" class="search-form" :model="inputSearch" ref="ruleFormRef">
          <el-form-item label="请输入联盟ID">
            <el-input v-model="inputSearch.searchId" :placeholder="`请输入联盟ID`" clearable />
          </el-form-item>
        </el-form>
        <div class="search">
          <el-button type="primary" @click="onclickSearch" :icon="Search">搜索</el-button>
        </div>
      </div>
  
      <!-- ------------表格--------------->
      <div class="table">
        <el-table v-loading="loading" :data="list" fit highlight-current-row style="width: 100%" :border="true">
          <el-table-column label="桌子id" align="center" prop="tableid" width="125px">
          </el-table-column>
          <el-table-column label="联盟id" align="center" prop="groupid" width="125px">
          </el-table-column>
          <el-table-column label="玩家人数" align="center" prop="player_num" width="125px">
          </el-table-column>
          <el-table-column label="庄id" align="center" prop="zhuang_id" width="300px">
          </el-table-column>
        
  
  
        </el-table>
  
      </div>
  
      <!-- ------------分页--------------->
      <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pagenum" :limit.sync="listQuery.pagesize"
          @pagination="getList" /> -->
  
      <!-- ------------分页--------------->
      <div class="pagination">
        <el-pagination v-model:currentPage="listQuery.pagenum" :page-size="listQuery.pagesize" background
          layout="total, sizes, prev, pager, next, jumper" :total="pageObj.total" @size-change="handleSizeChange"
          @current-change="getList" />
      </div>
  
  
      <el-dialog v-model="dialogVisible" title="玩家充值" width="80%">
        <el-form :model="chargeForm">
  
          <!-- <el-form-item label="用户ID">
            <el-input :value="chargeForm.id" disabled />
          </el-form-item>
          <el-form-item label="账号">
            <el-input :value="chargeForm.name" disabled />
          </el-form-item>
          <el-form-item label="呢称">
            <el-input :value="chargeForm.nick" disabled />
          </el-form-item>
          <el-form-item label="钻石">
            <el-input :value="chargeForm.gem" disabled />
          </el-form-item>
  
          <el-form-item label="选择充值类型">
            <el-radio-group v-model="chargeForm.type">
              <el-radio label="gem">钻石</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="输入充值数量(负数表示扣除)">
            <el-input v-model="chargeForm.num" type="number" clearable />
          </el-form-item> -->
  
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleRechargeSubmit()">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
  
  
    </div>
  </template>
  <script lang="ts" setup name="comprehensive">
  import { Search } from '@element-plus/icons-vue'
  import { computed, ref, reactive, onMounted, nextTick } from 'vue'
  import * as dayjs from 'dayjs'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import type { FormInstance } from 'element-plus'
  import { Logger } from '@/engine/util/Logger'
  import { HttpClient } from '@/utils/HttpClient'
  import { da, fa, ro, tr } from 'element-plus/es/locale'
  import { UIHelper } from '@/utils/UIHelper'
  import { GameConfig } from '@/config/GameConfig'
  import { DateUtil } from '@/engine/util/DateUtil'
  import { Base64Helper } from '@/engine/util/Base64Helper'
  import { GroupInfo } from '@/store/model/GroupInfo'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const loading = ref(true)
  const appContainer = ref(null)
  
  
  const inputSearch = reactive({
    searchId: "" + GroupInfo.instance.id,
  })
  
  //列表查询选项
  const listQuery = reactive({
    pagenum: 1, //第几页
    pagesize: 10, //一页多少个
  })
  
  let list = reactive([
    {
  
    }
  ])
  let pageObj = reactive({
    total: 0
  })
  
  const dialogVisible = ref(false)
  const chargeForm = reactive({
  
  })
  
  
  
  onMounted(() => {
  
    nextTick(() => {
      // let data = appContainer.value.
    })
    setTimeout(() => {
      loading.value = false
    }, 500)
    getList()
  })
  
  
  const onclickSearch = () => {
    Logger.log('onclickSearch!', inputSearch)
    let groupId: number = parseInt(inputSearch.searchId);
    if (isNaN(groupId)) {
      UIHelper.showMsg("请输入正常的id")
    } else {
      HttpClient.groupTableList(groupId, (data: object) => {
        loading.value = false
        let list: Array<object> = data["data"]
        formatDataList(list)
      })
    }
  
  }
  
  const handleSizeChange = (val: number) => {
    listQuery.pagesize = val
    getList()
  }
  
  const formatDataList = (dataList: Array<object>) => {
    list.splice(0)
    for (let i = 0; i < dataList.length; i++) {
      let data = {
        "tableid": dataList[i]["tableid"],
        "zhuang_id": dataList[i]["zhuang_id"],
        "people": dataList[i]["people"],
        "groupid": dataList[i]["groupid"],
        "player_num": dataList[i]["player_num"],
      }
  
      list[i] = data
      list.sort((a: object, b: object) => {
        return b["pos"] - a["pos"]
      })
    }
  
  }
  
  const getList = () => {
    loading.value = true;
    onclickSearch()
  
  }
  
  
  const onClickCharge = (row) => {
    Logger.log("onClickCharge", row)
  
    dialogVisible.value = true
  }
  
  const handleRechargeSubmit = () => {
    Logger.log("handleRechargeSubmit=", chargeForm)
  }
  
  const onClickZhanji=(row)=>{
    Logger.log("onClickZhanji", row)
    GroupInfo.instance.id = row.groupid
    GroupInfo.instance.userid = row.uid
    router.push({
      path: '/router_group/group_zhanji',
    })
  }
  
  
  
  
  </script>
      
  <style scoped lang="scss">
  .header {
    display: flex;
    padding: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
  
    .search-form {
      flex: 1;
  
      ::v-deep {
        .el-input--default {
          width: 200px;
        }
      }
    }
  
    .search {
      flex-shrink: 0;
      white-space: nowrap;
    }
  }
  </style>
      